<template>
	<div>
		<div class="gui-container" id="mgui" :style="[{ height: screenHeight - 80 + 'px' }]">
			<el-card shadow="hover" body-style="padding:8px; ">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane v-for="(r, i) in tabs" :key="i" :label="r.label" :name="r.name">
						<table :style="{ width: (state.isShow ? datas.col + 1 : datas.col) * 100 + 46 + 'px' }">
							<tr>
								<td>
									<div class="row head first">
										<div class="col col1"><i>行</i><b>列</b></div>
										<div class="col" v-for="index of datas.col" :key="'col' + index">{{ index }}</div>
										<div class="col" v-show="state.isShow">操作</div>
									</div>
								</td>
							</tr>
							<tr v-for="(r, i) in datas.rows" :key="'r' + i">
								<td>
									<div class="row">
										<div class="col" style="width: 40px; text-align: center; line-height: 80px">{{ i + 1 }}</div>
										<div class="col" v-for="(r1, i1) in r" :key="'r' + i + i1" @click="onEviListInfo(r1.id, r1.name)">
											<img src="/images/g2.jpg" />
											<div class="op" v-if="state.isShow">
												<i class="el-icon-edit-outline" @click="open(i + 1, i1 + 1, r1.name)"></i>
											</div>
											<div class="op" v-else style="top: 2px; left: 10px">
												<el-progress
													:percentage="r1.eviCount"
													style="width: 80px"
													status="success"
													:show-text="false"
													stroke-width="6"
													v-if="r1.eviCount < 80"
												>
												</el-progress>
												<el-progress
													:percentage="r1.eviCount"
													style="width: 80px"
													status="warning"
													:show-text="false"
													stroke-width="6"
													v-else-if="r1.t1 < 90"
												>
												</el-progress>
												<el-progress :percentage="r1.eviCount" style="width: 80px" status="exception" :show-text="false" stroke-width="6" v-else>
												</el-progress>
												<el-link type="success" style="margin: 3px 0 0 16px; font-size: 10px; color: #67c23a" v-if="r1.eviCount < 80">{{
													r1.eviCount + '/' + r1.total
												}}</el-link>
												<el-link type="success" style="margin: 3px 0 0 16px; font-size: 10px; color: #e6a23c" v-else-if="r1.eviCount < 90">{{
													r1.eviCount + '/' + r1.total
												}}</el-link>
												<el-link type="success" style="margin: 3px 0 0 16px; font-size: 10px; color: #f56c6c" v-else>{{
													r1.eviCount + '/' + r1.total
												}}</el-link>
											</div>
											<div class="txt">{{ r1.name }}</div>
										</div>
										<div class="col" v-show="state.isShow">
											<el-button type="success" plain style="margin: 8px 0 0px 18px" size="mini" @click="appendBox(i + 1)">追 加</el-button>
											<el-button type="danger" plain size="mini" @click="ckdeleteBox(i + 1)" style="margin: 8px 0 0px 18px">删 除</el-button>
										</div>
									</div>
								</td>
							</tr>
						</table>

						<div class="add" v-show="state.isShow">
							<img src="/images/add.png" @click="ckCreateBox" />
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-card>
			<GuiEditCreate ref="guiEditCreate1" :cabinetCode="cabinetCode" @postMessage="postMessage" />
		</div>
		<div style="margin-left: 10px; margin-top: 10px">
			<span class="dialog-footer">
				<el-button @click="handleClose" size="small">取 消</el-button>
				<el-button type="primary" @click="ckSubmitData" size="small" v-show="state.isShow">保 存</el-button>
				<el-button type="danger" @click="ckdeleteBox(0)" size="small" v-show="state.isShow">清 空</el-button>
			</span>
		</div>
		<Evidencelist ref="evidencelistRef" />
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, getCurrentInstance, onUnmounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import GuiEditCreate from './gui_Edit_Create.vue';
import Link from '/@/layout/routerView/link.vue';
import Evidencelist from './evidencelist.vue';
import { queryBox, post, put, deleteBox } from '/@/api/store/box';

export default {
	components: { GuiEditCreate, Link, Evidencelist },
	props: {
		isShow: Boolean,
		id: Number,
		cols: Number,
		cabinetCode: String,
		code: String,
		isInOut: Number,
	},
	setup(props, content) {
		// let { handleClose } = toRefs(props);

		const evidencelistRef = ref();
		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			screenHeight: document.body.clientHeight - 100,
			screenWidth: document.body.clientWidth * 0.7,
			isShow: props.isShow,
			activeName: '1',
			guiEditCreate1: ref(),
			id: props.id,
			cols: props.cols,
			cabinetCode: props.cabinetCode,
			code: props.code,
			isInOut: props.isInOut,
			tabs: [
				{ label: '正面', name: '1' },
				{ label: '反面', name: '0' },
			],
			datas: { rows: [], col: 0, row: 0 },
		});

		query();
		async function query() {
			await queryBox(state.id, state.cols, state.activeName).then((res: any) => {
				if (res.success) {
					state.datas = res.data;
				}
			});
		}

		const ckCreateBox = () => {
			state.guiEditCreate1.openDialog();
		};

		const postMessage = (obj: any) => {
			var row = state.datas.row;
			var col = state.datas.col;
			if (col < obj.col) {
				state.datas.col = obj.col;
			}

			for (var i = 1; i <= obj.row; i++) {
				var array = [];
				for (var j = 1; j <= obj.col; j++) {
					var crow = row + i;
					var rowName = crow < 10 ? '0' + crow : crow + '';
					var colName = j < 10 ? '0' + j : j + '';
					array.push({
						id: 0,
						areaId: 0,
						cabinetId: state.id,
						name: rowName + colName,
						rows: crow,
						columns: j,
						colNO: state.cols,
						direction: Number(state.activeName),
						isAdd: 1,
						eviCount: 0,
						total: 100,
					});
				}

				state.datas.rows.push(array);
			}
		};

		async function ckSubmitData() {
			await post(state.datas.rows).then((res: any) => {
				if (res.success) {
					query();
					ElMessage({ message: '操作成功', type: 'success' });
				} else {
					ElMessage({ message: '操作失败', type: 'error' });
				}
			});
		}

		async function ckdeleteBox(crow) {
			//如果还未保存，择直接删除

			if (crow > 0 &&state.datas.rows[crow - 1][0] &&state.datas.rows[crow - 1][0].isAdd) {
				state.datas.rows.splice(crow - 1, 1);
			} else {
				var _crow = state.datas.rows.length;
				for (var i = _crow; i >= 1; i--) {
					if (state.datas.rows[i - 1][0]&&state.datas.rows[i - 1][0].isAdd) {
						state.datas.rows.splice(i - 1, 1);
					}
				}

				if (state.datas.rows.length == 0) return;

				await deleteBox(state.id, state.cols, Number(state.activeName), crow).then((res: any) => {
					if (res.success) {
						query();
						ElMessage({ message: '操作成功', type: 'success' });
					} else {
						ElMessage({ message: '操作失败', type: 'error' });
					}
				});
			}
		}

		const handleClose = () => {
			content.emit('update:editDrawer', false);
		};

		const open = (crow, col, name) => {
			ElMessageBox.prompt(`修改${crow}行${col}列名字`, name, {
				confirmButtonText: '修 改',
				cancelButtonText: '关 闭',
				inputValue: name,
				//inputPattern: //,
				inputErrorMessage: '必填项目',
			})
				.then(({ value }) => {
					if (!value) {
						ElMessage({
							type: 'info',
							message: '必填项目',
						});
					}

					state.datas.rows[crow - 1][col - 1].name = value;
					state.datas.rows[crow - 1][col - 1].isAdd = 2;
					ElMessage({
						type: 'success',
						message: `您修改的当前值是:${value}`,
					});
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '弹出框被关闭',
					});
				});
		};

		const appendBox = (crow) => {
			ElMessageBox.prompt(`第${crow}行追加箱子`, `请输入大于0的整数`, {
				confirmButtonText: '确 定',
				cancelButtonText: '关 闭',
				inputPattern: /^\d{1,20}$/,
				inputErrorMessage: '请输入1-20整数',
			})
				.then(({ value }) => {
					//找到当前行
					var cols = Number(value);
					var crowqdata = state.datas.rows[crow - 1];

					var ccols = crowqdata.length;

					state.datas.col = state.datas.col + cols;

					for (var i = 1; i <= cols; i++) {
						var ccol = ccols + i;
						var rowName = crow < 10 ? '0' + crow : crow + '';
						var colName = ccol < 10 ? '0' + ccol : ccol + '';
						crowqdata.push({
							id: 0,
							areaId: 0,
							cabinetId: state.id,
							name: rowName + colName,
							rows: crow,
							columns: ccol,
							colNO: state.cols,
							direction: Number(state.activeName),
							isAdd: 1,
							eviCount: 0,
							total: 100,
						});
					}

					ElMessage({
						type: 'success',
						message: `您当前追加了:${value}列`,
					});
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '弹出框被关闭',
					});
				});
		};

		const onEviListInfo = (id, name) => {
			//出入库选择位置时
			if (state.isInOut == 1 && !state.isShow) {
				var str = '-R-';
				if (state.activeName == '0') str = '-L-';
				let wz = state.code + '-' + state.cols + '-' + str + name;
				proxy.mittBus.emit('changeLocation', { id: id, name: name, code: wz });
				content.emit('update:editDrawer', false);
				//如何关闭当前页面呢
			} else {
				if (!state.isShow) {
					evidencelistRef.value.openDialog(id);
				}
			}
		};

		const handleClick = () => {
			query();
		};
		onUnmounted(() => {
			proxy.mittBus.off('changeLocation');
		});
		return {
			state,
			handleClick,
			ckdeleteBox,
			open,
			appendBox,
			postMessage,
			ckSubmitData,
			handleClose,
			ckCreateBox,
			onEviListInfo,
			evidencelistRef,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.gui-container {
	overflow: hidden;
	border: 0px solid red;
}
.gui-container .first {
	border-top: 1px solid #ccc;
}
.gui-container .row {
	height: 80px;
	border-right: 1px solid #ccc;
	clear: left;
	margin-top: -2px;
}
.gui-container .col {
	float: left;
	border: 1px solid #ccc;
	border-top: 0;
	border-right: 0;
	width: 100px;
	height: 80px;
	position: relative;
}
.gui-container .row.head {
	height: 40px;
}
.gui-container .row.head .col {
	height: 40px;
	line-height: 40px;
	text-align: center;
}
.gui-container .row.head .col.col1 {
	background: linear-gradient(45deg, transparent 46.5%, #ddd 49.5%, #ddd 50%, transparent 50%);
	width: 40px;
}
.gui-container .row.head .col.col1 i {
	left: 3px;
	top: 18px;
	position: absolute;
	font-style: normal;
	line-height: normal;
}
.gui-container .row.head .col.col1 b {
	left: 22px;
	top: 2px;
	position: absolute;
	font-weight: normal;
	line-height: normal;
}
.gui-container .row .col img {
	width: 80px;
	margin: 10px auto;
	display: block;
}
.gui-container .row .col .op {
	position: absolute;
	width: 100px;
	left: 40px;
	top: 12px;
}
.gui-container .row .col .op i {
	margin-right: 5px;
	color: #409eff;
	cursor: pointer;
}
.gui-container .row .col .txt {
	position: absolute;
	width: 68px;
	text-align: center;
	top: 40px;
	left: 10px;
}
/* /deep/.el-dialog__header {
	--height: 55px;
}
/deep/.el-overlay .el-dialog .el-dialog__body {
	padding-top: 8px !important;
	overflow: hidden;
}

/deep/.el-tabs__content {
	height: calc(100vh - 350px);
	overflow: auto;
}
*/

.nav-op {
	position: absolute;
	right: 60px;
	top: 68px;
	width: 70;
	font-size: 18px;
}
.nav-op i {
	margin-right: 5px;
	color: #409eff;
	cursor: pointer;
}
.add {
	font-size: 38px;
	margin: 30px 0 0 30px;
	position: fixed;
}
.add img {
	margin-right: 5px;
	width: 100px;
	height: 100px;
	cursor: pointer;
	position: fixed;
	bottom: 100px;
	right: 100px;
}
#mgui /deep/.el-tabs__content {
	height: calc(100vh - 205px);
	min-height: 300px;
	overflow: auto;
	border: 0px solid red;
}
</style>
